<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1. 导入 vue 插件 -->
    <script src="./js/vue@3.5.13.js"></script>
    <style>
        .box1{width: 600px;height: 600px;background-color: red;}
        .box2{width: 400px;height: 400px;background-color: rgb(0, 255, 34);}
        .box3{width: 200px;height: 200px;background-color: rgb(255, 166, 0);}
    </style>
</head>
<body>
    <!-- 2. 准备容器 -->
    <div id="app">
        <!-- 数据绑定 -->
        <!-- <img v-bind:src="img" alt=""> -->
        <!-- 单向数据绑定：数据可以更改页面，页面不能更改数据 -->
        <!-- <input type="text" v-bind:value="msg"> -->
        <!-- <input type="text" :value="msg"> -->
        <!-- 双向数据绑定：数据不仅可以更改页面，页面也可以更改数据 -->
        <!-- <input type="text" v-model="msg"> -->

        <div class="box1" @click="fn1()">
            <div class="box2" @click.stop="fn2()">
                <div class="box3" @click.stop="fn3()"></div>
            </div>
        </div>
        <!-- 链接标签：默认行为：跳转 -->
        <a href="https://www.baidu.com" @click.prevent>百度一下</a>

    </div>

    <script>
        // 3. 解构 vue 函数
        const { createApp, ref } = Vue
        // 4. 实例化 vue
        createApp({
            setup(){
                // 声明一个图片
                let img = ref("https://image1.huabianyl.com/20251009/58c2414b-8fd5-4be3-9250-b8ac676bf3ab")
                let msg = ref("123")

                const fn1 = () => {  alert(111) }
                const fn2 = () => {  alert(222) }
                const fn3 = () => {  alert(333) }

                return{
                    img,
                    msg,
                    fn1,fn2,fn3
                }
            }
        }).mount("#app")   // 5. 挂载容器

    </script>
</body>
</html>